<template>
    <div @click="handClick">
        <slot></slot>
    </div>

    <div class="overlay" v-if="show" @click="handClick"></div>
    <div class="popup" v-if="show" :style="{ top: position[0] + 'px', left: position[1] + 'px' }">

        <!--取消确定标题-->
        <div v-show="isShowTitle" class="topTitle">
            <div @click="toBack" style="display: flex;" v-if="hasBack">
                <img class="img2" src="../../assets/images/back.svg">
                {{ $t('text.Common.l40') }}
            </div>
            <div v-else>
                <div @click="show = !show" style="white-space: nowrap;">{{ $t('text.DialogLayout.l22') }}</div>
                <div style="color: black;">{{ leftText }}</div>
                <div @click="confirm" style="white-space: nowrap;">{{ $t('text.DialogLayout.l23') }}</div>
            </div>
            <div style="color: black;"> {{ $t('text.Common.l41') }}</div>
            <div></div>
        </div>

        <!--普通搜索框-->
        <div class="df" v-show="isShowSerach1">
            <img class="img1" src="../../assets/images/search2.png" @click="search" />
            <input :placeholder="$t('text.House.l151')" class="leftTop2Input" v-model="searchText" @click="searchClick"
                @keyup.enter="search">
        </div>

        <!--范围搜索框-->
        <div class="dff" v-show="isShowSerach2">
            <div class="inputEndText">{{ inputEndText }}</div>
            <input :placeholder="$t('text.House.l151')" class="searchInput">
            <div>-</div>
            <div class="inputEndText">{{ inputEndText }}</div>
            <input :placeholder="$t('text.House.l151')" class="searchInput">
        </div>

        <!--层级数据列表-->
        <div class="ov" v-show="!isClickSearch">
            <div class="item_name2" v-for="s in selectListCopy" v-bind:key="s">
                <div @click="selectItem(s)" class="item_name_left">{{ s.dictName }}</div>
                <div v-if="s.children != null" class="item_name_right" @click="selectNext(s)">&emsp;＞</div>
            </div>
        </div>

        <!--搜索数据列表-->
        <div v-show="isClickSearch" >
            <div v-if="searchText == ''" class="ov">
                <div class="historyText">
                    <span style="text-align: left;">{{ $t('text.Common.l32') }}</span>
                    <span style="text-align: right;color: #6698ff;" @click="clearLocal">{{ $t('text.Common.l33') }}</span>
                </div>
                <div class="item_name" v-for="s in searchTextTemp" v-bind:key="s" @click="searchText = s">
                    {{ s }}
                </div>
            </div>
            <div v-else class="ov">
                <div class="item_name" v-for="s in areaList" v-bind:key="s" @click="searchReturn(s.dictName, s.dictValue)">
                    <div v-if="s.dictName === nowSelectName" class="item_name_default">{{ s.dictName }}</div>
                    <div v-else>{{ s.dictName }}</div>
                </div>
            </div>
        </div>

    </div>
</template>
  
<script >

export default {
    name: 'selectDatas',
    emits: ['returnData'],
    props: {
        leftText: String,
        selectList: Array,
        default: String,
        hasBack: {
            default: true,
            type: Boolean,
        },
        inputEndText: String,
        isShowTitle: {
            default: true,
            type: Boolean,
        },
        isShowSerach1: {
            default: false,
            type: Boolean,
        },
        isShowSerach2: {
            default: false,
            type: Boolean,
        },
        index: Number,
        position: {
            default: ['', '']
        }
    },
    components: {
    },
    data() {
        return {
            show: false,
            nowSelectName: this.default,
            isClickSearch: false,
            selectListCopy: this.selectList,
            selectListBack: [],
            selectListIndex: 0,
            searchText: '',
            searchTextTemp: [],
            areaList: []
        }
    },
    mounted() {
    },
    methods: {
        handClick() {
            this.show = !this.show
        },

        //点击选择
        selectItem(s) {
            //点击直接返回选择值
            this.$emit('returnData', s.dictName, s.dictValue, this.index, s);
            this.show = !this.show
        },
        //点击打开下一级
        selectNext(s) {
            if (s.children) {
                //保存这一级的内容
                this.selectListBack.push(this.selectListCopy)
                //如果有下一级,将属性值替换为下一级
                this.selectListCopy = s.children
                //层级+1
                this.selectListIndex = this.selectListIndex + 1
            }
        },
        //返回
        toBack() {
            if (this.isClickSearch) {
                //假如点了搜索后点了返回
                this.isClickSearch = !this.isClickSearch
            } else {
                const backLength = this.selectListBack.length
                if (this.selectListIndex > 0 && backLength > 0) {
                    //存在层级，拿出上一级的值去替换
                    this.selectListCopy = this.selectListBack[backLength - 1]
                    //替换后删除
                    this.selectListBack.pop()
                    //当前层级减1
                    this.selectListIndex = this.selectListIndex - 1
                } else {
                    //层级为0,直接关闭
                    this.show = !this.show
                }
            }
        },
        //点击搜索
        searchClick() {
            //点击搜索之后再拿缓存，不在初始化拿
            const temp = localStorage.getItem(this.leftText)
            if (temp != null) {
                this.searchTextTemp = JSON.parse(temp)
            }
            this.isClickSearch = true
        },
        //搜索
        search() {
            //缓存搜索内容
            localStorage.clear()
            this.searchTextTemp.unshift(this.searchText)
            const tempLength = this.searchTextTemp.length
            if (tempLength > 5) {
                this.searchTextTemp.pop()
            }
            localStorage.setItem(this.leftText, JSON.stringify(this.searchTextTemp))
        },
        //清除搜索历史
        clearLocal() {
            localStorage.removeItem(this.leftText)
            this.searchTextTemp = []
        },

        //模糊搜索
        searchByValue(data, value) {
            const result = [];
            // 模糊匹配的逻辑
            function fuzzyMatch(str, searchValue) {
                const pattern = new RegExp(searchValue, 'i'); // 忽略大小写
                return pattern.test(str);
            }
            // 递归遍历数据并匹配
            function recursiveSearch(arr) {
                for (const item of arr) {
                    if (fuzzyMatch(item.dictName, value)) {
                        result.push({ dictName: item.dictName, dictValue: item.dictValue });
                    }
                    if (item.children && item.children.length > 0) {
                        recursiveSearch(item.children); // 递归遍历子节点
                    }
                }
            }
            recursiveSearch(data);
            return result;
        },

        searchReturn(name, value) {
            this.$emit('returnData', name, value, this.index);
            this.show = !this.show
        }

    },
    watch: {
        show: {
            handler(newValue) {
                if (!newValue) {
                    this.isClickSearch = false
                    this.selectListCopy = this.selectList
                }
            }
        },
        searchText: {
            handler() {
                this.areaList = this.searchByValue(this.selectListCopy, this.searchText)
            }
        }
    },
    computed: {

    }

}

</script>

<style scoped>
.df {
    display: flex;
    flex-direction: column;
    position: relative;
}

.dff {
    display: flex;
    align-items: center;
    position: relative;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
}

.popup {
    position: fixed;
    background: white;
    border: 1px solid #eee;
    box-shadow: 1px 1px 15px #e5e5e5;
    z-index: 1;
    font-size: 13px;
    /* margin-left:80px;
    margin-top: -23px; */
    min-width: 225px;
    min-height: 200px;
}

.img1 {
    position: absolute;
    width: 15px;
    height: 15px;
    top: 12px;
    z-index: 1;
    right: 30px;
}

.img2 {
    height: 15px;
    width: 15px;
}

.ov {
    width: 225px;
    min-height: 180px;
    max-height: 200px;
    overflow: auto;
}

.topTitle {
    display: flex;
    justify-content: space-between;
    color: #6698ff;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 12px;
    padding-top: 6px;
    padding-bottom: 6px;
    background-color: rgb(242, 242, 242);
    flex: 1;
}

.item_name {
    text-align: left;
    padding-left: 10px;
    padding-right: 10px;
    color: black;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;

}

.item_name2 {
    text-align: left;
    color: black;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;

}

.item_name_left {
    flex: 1;
    padding: 5px 10px;
}

.item_name_right {
    text-align: end;
    white-space: nowrap;
    padding-right: 10px;
    padding-left: 25px;
    padding-top: 3px;
    padding-bottom: 3px;
}

.item_name_left:hover {
    background-color: rgb(245, 247, 250);
    color: #6698ff;
}

.item_name_right:hover {
    background-color: rgb(245, 247, 250);
    color: #6698ff;
}

.item_name:hover {
    background-color: rgb(245, 247, 250);
    color: #6698ff;
}

.leftTop2Input {
    outline: none;
    height: 25px;
    border: 1px solid rgb(220, 223, 230);
    padding-left: 8px;
    padding-right: 20px;
    border-radius: 5px;
    font-size: 12px;
    position: relative;
    margin: 5px 7px;
}

.leftTop2Input:focus {
    border: 1px solid #6698ff;
}

.historyText {
    font-size: 12px;
    color: gray;
    display: flex;
    justify-content: space-between;
    padding-left: 10px;
    padding-right: 10px;
}

.inputEndText {
    position: absolute;
    z-index: 2;
    color: rgb(168, 168, 168);
    font-size: 12px;
    right: 12px;
    top: 5px;
}

.searchInput {
    width: 100%;
    outline: none;
    height: 20px;
    padding-left: 8px;
    padding-right: 25px;
    border-radius: 5px;
    font-size: 12px;
    background: rgb(242, 242, 242);
    border: none;
    margin: 3px 10px;
}</style>
  